<template>
  <div class="full-box shadow-box padding-box">
    <OperateCommon
      :showSave="true"
      :showBack="true"
      @save="save"
      @back="linkTo('/deptList')"
    >
    </OperateCommon>
    <div class="c-form-padding">
      <el-form
        class="c-form"
        :model="form"
        ref="form"
        :rules="rules"
        label-width="100px"
        :inline="false"
      >
        <el-form-item label="单位名称" prop="dept_name">
          <el-input v-model="form.dept_name" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="上级单位" prop="">
          <DeptCascader
            :defaultChecked.sync="form.parent_id"
            :options="deptTree"
            @change="changeDept"
          >
          </DeptCascader>
        </el-form-item>
        <el-form-item label="部门负责人" prop="">
          <el-input v-model="form.dept_principal" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="部门排序" prop="">
          <el-input-number
            v-model="form.sort"
            size="normal"
            label=""
            :min="-999"
            :max="999"
            :step="1"
            :controls="true"
            controls-position="right"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item label="状态" prop="">
          <el-switch
            v-model="form.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="0"
            inactive-value="1"
          >
          </el-switch>
          <span> {{ form.state == 0 ? "已启用" : "已禁用" }} </span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import OperateCommon from "@/components/Common/OperateCommon.vue";
import LinkTo from "@/mixins/LinkTo";
import {
  getDeptDetails,
  getDeptTree,
  postDeptDetails,
} from "@/api/System/Department";
import { required } from "@/utils/eValidate";
import DeptCascader from "@/components/Common/DeptCascader.vue";
export default {
  name: "Dept",
  mixins: [LinkTo],
  components: { OperateCommon, DeptCascader },
  data() {
    return {
      id: 0,
      form: {
        dept_name: "",
        parent_id: "",
        dept_principal: "",
        sort: "",
        state: "0",
      },
      rules: {
        user_code: [required],
        user_name: [required],
      },
      deptTree: [],
    };
  },
  methods: {
    initDept() {
      getDeptTree().then((res) => {
        if (res.code == 0) {
          this.deptTree = res.data;
        }
      });
    },
    initData() {
      getDeptDetails({ id: this.id }).then((res) => {
        if (res.code == 0) {
          this.form = res.data;
        }
      });
    },
    changeDept(val) {
      this.form.parent_id = val.value;
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          postDeptDetails(this.form).then((res) => {
            if (res.code == 0) {
              this.$message.success("保存成功");
              this.linkTo("/deptList");
            }
          });
        }
      });
    },
  },
  created() {
    this.initDept();
    this.id = this.$route.params.id;
    if (this.id > 0) {
      this.initData();
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/base-form.scss";
</style>
